import 'package:card_topia/design_specifications.dart';
import 'package:card_topia/my_router.dart';
import 'package:card_topia/pages/scan_page/scan_page.dart';
import 'package:card_topia/pages/setting_page/setting_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

///底部中间页


class CenterPage extends StatelessWidget {
  const CenterPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(20.w)
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            //背景插图
            Expanded(
              child: Container(
                alignment: Alignment.center,
                width: double.infinity,
              ),
            ),
            SizedBox(height: 32.w,),
            const Column(
              children: [
                CenterPageItem(type: 2),
                CenterPageItem(type: 1),
                CenterPageItem(type: 0),
              ],
            ),
            SizedBox(height: 32.w,),
            CenterPageBtn(),
            SizedBox(height: 45.w,)
          ],
        ),
      ),
    );
  }
}
///按钮
class CenterPageBtn extends StatefulWidget {
  const CenterPageBtn({super.key});

  @override
  State<CenterPageBtn> createState() => _CenterPageBtnState();
}

class _CenterPageBtnState extends State<CenterPageBtn> {
  bool start = true;
  @override
  void initState() {
    super.initState();
    // Future.delayed(Duration.zero,(){
    //   start = true;
    //   setState(() {
    //
    //   });
    // });
  }
  @override
  Widget build(BuildContext context) {
    return AnimatedScale(
      scale: start?1:0,
      curve: Curves.easeInOut,
      duration: const Duration(milliseconds: 600),
      child: InkWell(
        onTap: (){
          MyRouter.pop();
          return;
        },
        child: Container(
          decoration: BoxDecoration(
              color: Color(0xffE5E5E5),
              borderRadius: BorderRadius.circular(50)
          ),
          width: 42.w,
          height: 42.w,
          child: Hero(
              tag: "center_btn",
              child: Icon(CupertinoIcons.clear,color: textColor,size: 14.w,)),
        ),
      ),
    );
  }
}



///item
class CenterPageItem extends StatefulWidget {
  const CenterPageItem({super.key, required this.type});
  final int type;

  @override
  State<CenterPageItem> createState() => _CenterPageItemState();
}

class _CenterPageItemState extends State<CenterPageItem> {
  bool start = false;
  bool _scale = false;
  String title = "";
  String? content;
  String? src;
  Color? color;
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration.zero,(){
      start = true;
      setState(() {

      });
    });
  }
  _build(){
    switch(widget.type){
      case 0:
        title = "发布帖子";
        content = "一键发布";
        src = "assets/center_page/post.png";
        color = Color(0xFF008797);
        break;
      case 2:
        title = "发布交易";
        content = "一键售卖闲置卡片";
        src = "assets/center_page/trade.png";
        color = Color(0xFF1864B7).withOpacity(0.05);
        break;
      default:
        title = "扫一扫";
        content = "绑卡,鉴卡,一扫便知";
        src = "assets/center_page/scan.png";
        color = Color(0xFF0695BC).withOpacity(0.05);
    }
    precacheImage(AssetImage(src!), context);
  }
  onTap(){
    MyRouter.pop();
    if(widget.type==0){
      //发帖
    }else if(widget.type==1){
      //扫一扫
      MyRouter.push(page: ScanPage());
    }else if(widget.type==2){
      //发布交易
    Navigator.push(context,MaterialPageRoute(builder: (_)=>SettingPage()));
    }
  }
  @override
  Widget build(BuildContext context) {
    _build();
    return AnimatedSlide(
      offset: start?Offset.zero:const Offset(0, 0.5),
      curve: Curves.easeInOut,
      duration: Duration(milliseconds: widget.type==0?500:widget.type==1?400:300),
      child: InkWell(
        onTapDown: (_){
          setState(() {
            _scale = true;
          });
        },
        onTapCancel: (){
          setState(() {
            _scale = false;
          });
        },
        onTapUp: (_){
          setState(() {
            _scale = false;
          });
          onTap();
        },
        child: AnimatedScale(
          scale: _scale?0.9:1,
          curve: Curves.easeOutQuad,
          duration: Duration(milliseconds: widget.type==0?400:widget.type==1?300:200),
          child: Container(
            width: double.infinity,
              decoration: BoxDecoration(
                color: color,
                borderRadius: BorderRadius.circular(16.w)
              ),
              margin: EdgeInsets.only(top: 16.w,left: 32.w,right: 32.w),
              padding: EdgeInsets.symmetric(horizontal: 16.w,vertical: 12.w),
              child: Row(
                children: [
                  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                    ),
                    height: 40.w,
                    width: 40.w,
                    child: Image.asset(src!),
                  ),
                  SizedBox(width: 16.w,),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(title,style: TextStyle(fontSize: 16.sp,fontFamily: harmony,color: widget.type==0?Colors.white:textColor,fontWeight: FontWeight.bold),),
                      SizedBox(height: 4.w,),
                      Text("$content",style: TextStyle(fontSize: 12.sp,fontFamily: harmony,color: widget.type==0?Colors.white:descColor),),
                    ],
                  )
                ],
              )),
        ),
      ),
    );
  }
}
